{extend name="../../base/view/common/base" /}
{block name="style"}
<style>
    .layui-tree-entry {
        font-size: 15px;
        line-height: 24px
    }

    .layui-tree-set {
        padding: 2px 0
    }

    .layui-tree-iconClick .layui-icon {
        color: #1E9FFF
    }

    .layui-icon layui-icon-file {
        font-size: 16px;
    }

    .layui-tree-icon {
        height: 14px;
        line-height: 14px;
        width: 14px;
        text-align: center;
        border: 1px solid #1E9FFF;
        color: #1E9FFF
    }

    .layui-tree-line .layui-tree-set .layui-tree-set:after {
        top: 18px;
    }

    .tree-left {
        width: 200px;
        float: left;
        height: calc(100% - 30px);
        overflow: scroll;
        border: 1px solid #eeeeee;
        background-color: #FAFAFA;
        padding: 12px 12px 12px 5px;
    }

    .tree-left h3 {
        font-size: 16px;
        height: 30px;
        padding-left: 10px;
        font-weight: 800
    }

    .gougu-upload-files {
        background-color: #ffffff;
        border: 1px solid #e4e7ed;
        color: #c0c4cc;
        cursor: not-allowed;
        padding: 0 12px;
        width: 180px;
        box-sizing: border-box;
        display: inline-block;
        font-size: inherit;
        height: 38px;
        line-height: 35px;
        margin-right: 8px;
        border-radius: 2px;
    }

    .gougu-upload-tips {
        color: #969696
    }

    .layui-form-item {
        margin-bottom: 8px;
    }

    .layui-input-block {
        min-height: 24px;
    }
</style>
{/block}
<!-- 主体 -->
{block name="body"}
<div class="p-3" style="height:100%; box-sizing: border-box;">
    <div class="tree-left">
        <h3>企业组织架构</h3>
        <div id="depament"></div>
    </div>
    <div class="body-table" style="margin-left:228px; overflow:hidden;">
        <form class="layui-form gg-form-bar border-t border-x" lay-filter="barsearchform">
            <div class="layui-input-inline" style="width:136px">
                <select name="status">
                    <option value="">选择员工状态</option>
                    <option value="1">正常状态</option>
                    <option value="0">禁止登录</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width:136px">
                <select name="type">
                    <option value="">选择员工类型</option>
                    <option value="1">正式员工</option>
                    <option value="2">试用员工</option>
                    <option value="3">实习员工</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width:240px">
                <input type="text" name="keywords" placeholder="输入关键字，如：ID/姓名/手机号码" class="layui-input"
                       autocomplete="off"/>
            </div>
            <div class="layui-input-inline" style="width:150px;">
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform"><i
                        class="layui-icon layui-icon-search mr-1"></i>搜索
                </button>
                <button type="reset" class="layui-btn layui-btn-reset" lay-filter="reset">清空</button>
            </div>
        </form>
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
</div>


{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    const moduleInit = ['tool', 'tablePlus'];

    function gouguInit() {
        var table = layui.tablePlus, tool = layui.tool, tree = layui.tree, form = layui.form, upload = layui.upload;
        $.ajax({
            url: "/api/index/get_department_tree",
            type: 'get',
            success: function (res) {
                //仅节点左侧图标控制收缩
                tree.render({
                    elem: '#depament',
                    data: res.trees,
                    onlyIconControl: true,  //是否仅允许节点左侧图标控制展开收缩
                    click: function (obj) {
                        //layer.msg(JSON.stringify(obj.data));
                        layui.pageTable.reload({
                            where: {did: obj.data.id}
                            , page: {curr: 1}
                        });
                        $('[name="keywords"]').val('');
                        $('[name="status"]').val('');
                        $('[name="type"]').val('');
                        layui.form.render('select');
                    }
                });
            }
        })

        let uploadFiles;

        function clearFile() {
            for (let x in uploadFiles) {
                delete uploadFiles[x];
            }
            $('#gougu-upload-choosed').html('');
        }

        function uploadImport() {
            layer.open({
                'title': '批量导入员工',
                'type': 1,
                'area': ['640px', '360px'],
                'content': '<div class="layui-form p-3">\
						<div id="uploadType1">\
							<div class="layui-form-item">\
								<label class="layui-form-label">文件：</label>\
								<div class="layui-input-block">\
									<span class="gougu-upload-files">.xls,.xlsx</span><button type="button" class="layui-btn layui-btn-normal" id="uploadSelect">选择文件</button><a href="/static/home/file/勾股OA员工导入模板.xlsx" class="layui-btn ml-4">Execl表格模板下载</a>\
								</div>\
							</div>\
							<div class="layui-form-item">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block">\
									<span class="gougu-upload-tips">1、只有超级管理员才能进行批量导入操作；<br>2、只能上传 .xls、.xlsx文件；<br>3、数据请勿放在合并的单元格中；<br>4、文件大小请勿超过2MB，导入数据不能超过3000条<br>5、如果导入失败，请注意检查表格数据，格式按照样本填写，部门、职位需要系统中存在，不存在的话可能会导入失败。</span>\
								</div>\
							</div>\
							<div class="layui-form-item">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block green" id="gougu-upload-choosed"></div>\
							</div>\
							<div class="layui-form-item">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block red" id="gougu-upload-note"></div>\
							</div>\
							<div class="layui-form-item layui-form-item-sm">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block">\
									<button type="button" class="layui-btn" id="uploadAjax">上传并导入</button>\
								</div>\
							</div>\
						</div> \
				</div>',
                success: function (layero, idx) {
                    form.render();
                    //选文件
                    let uploadImport = upload.render({
                        elem: '#uploadSelect'
                        ,
                        url: '/api/import/import_admin'
                        ,
                        auto: false
                        ,
                        accept: 'file' //普通文件
                        ,
                        acceptMime: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // 此处设置上传的文件格式
                        ,
                        exts: 'xls|xlsx' //只允许上传文件格式
                        ,
                        bindAction: '#uploadAjax'
                        ,
                        choose: function (obj) {
                            uploadFiles = obj.pushFile();
                            // 清空,防止多次上传
                            clearFile();
                            obj.preview(function (index, file, result) {
                                obj.pushFile();// 再添加
                                $('#gougu-upload-choosed').html('已选择：' + file.name);
                            });
                        }
                        ,
                        before: function (obj) {
                        }
                        ,
                        progress: function (n, elem, e) {
                            $('#gougu-upload-note').html('文件上转中...');
                            if (n == 100) {
                                $('#gougu-upload-note').html('数据导入中...');
                            }
                        }
                        ,
                        error: function (index, upload) {
                            clearFile();
                            $('#gougu-upload-note').html('数据导入失败，请关闭重试');
                        }
                        ,
                        done: function (res, index, upload) {
                            clearFile();
                            layer.msg(res.msg);
                            $('#gougu-upload-note').html(res.msg);
                            if (res.code == 0) {
                                layer.close(idx);
                                layui.pageTable.reload();
                            }
                        }
                    });
                }
            });
        }

        layui.pageTable = table.render({
            elem: '#test',
            title: '员工列表',
            toolbar: '#toolbara',
            defaultToolbar: [],
            is_excel: true,
            url: "/finance/salary/base_user", //数据接口
            page: true, //开启分页
            limit: 20,
            height: 'full-85',
            cols: [
                [
                    {
                        field: 'id',
                        title: '编号',
                        align: 'center',
                        width: 80,
                        templet: function (d) {
                            return d.LAY_INDEX+1
                        }
                    }, {
                    field: 'status',
                    title: '状态',
                    align: 'center',
                    width: 80,
                    templet: function (d) {
                        var html = '<span class="layui-badge layui-bg-green">正常</span>';
                        if (d.status == 2) {
                            html = '<span class="layui-badge layui-bg-orange">已离职</span>'
                        }
                        else if (d.status == 0) {
                            html = '<span class="layui-badge">被禁用</span>'
                        }
                        return html;
                    }
                }, {
                    field: 'type',
                    title: '员工类型',
                    align: 'center',
                    width: 100,
                    templet: function (d) {
                        var html = '<span style="color:#393D49">正式员工</span>';
                        if (d.type == 2) {
                            html = '<span style="color:#01AAED">试用员工</span>'
                        }
                        else if (d.type == 3) {
                            html = '<span style="color:#5FB878">实 习 生</span>'
                        }
                        return html;
                    }
                }, {
                    field: 'type',
                    title: '员工等级',
                    align: 'center',
                    width: 80,
                    templet: function (d) {
                        var html = '<span >一级员工</span>';
                        if (d.partner_id == 1) {
                            html = '<span>一级员工</span>'
                        }
                        else if (d.partner_id == 2) {
                            html = '<span>二级员工</span>'
                        }else if (d.partner_id == 3) {
                            html = '<span>三级员工</span>'
                        }else if (d.partner_id == 4) {
                            html = '<span>四级员工</span>'
                        }else if (d.partner_id == 5) {
                            html = '<span>五级员工</span>'
                        }else if (d.partner_id == 6) {
                            html = '<span>六级员工</span>'
                        }
                        return html;
                    }
                }, {
                    field: 'name',
                    title: '用户姓名',
                    align: 'center',
                    width: 180
                }, {
                    field: 'mobile',
                    title: '手机号码',
                    align: 'center',
                    width: 180
                },  {
                    field: 'sex',
                    title: '性别',
                    align: 'center',
                    width: 100,
                    templet: function (d) {
                        var html = '未知';
                        if (d.sex == 1) {
                            html = '男'
                        }
                        else if (d.sex == 2) {
                            html = '女'
                        }
                        return html;
                    }
                }, {
                    field: 'department',
                    title: '所在部门',
                    align: 'center',
                    width: 200
                }, {
                    field: 'position',
                    title: '岗位职称',
                    align: 'center',
                    width: 200
                }, {
                    field: 'base_salary',
                    title: '综合薪资',
                    align: 'center',
                    width: 200
                }, {
                    field: 'insurance_deduct',
                    title: '五险扣除',
                    align: 'center',
                    width: 200
                },{
                    field: 'right',
                    fixed: 'right',
                    title: '操作',
                    width: 200,
                    align: 'center',
                    templet: function (d) {
                        var html = '';
                        var btn2 = '<span class="layui-btn layui-btn-xs layui-btn-warm" lay-event="add" style="background-color: #5fb878">薪资基数</span>';
                        html = '<div class="layui-btn-group">' + btn2 + '</div>';
                        return html;
                    }
                }
                ]
            ]
        });


        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'add') {
                tool.side('/finance/salary/add?id=' + data.id);
                return;
            }

        });

        //监听搜索提交
        form.on('submit(webform)', function (data) {
            layui.pageTable.reload({
                where: {
                    keywords: data.field.keywords,
                    status: data.field.status,
                    type: data.field.type
                },
                page: {
                    curr: 1
                }
            });
            return false;
        });
    }


</script>
{/block}
<!-- /脚本 -->